<template>
	<view class="page">
		<u-line color="info"></u-line>
		<picker mode="date" fields="month" :start="start" :end="now" @change="changeDate">
			<view class="pick-time fillx bsp10">
				时间选择
				<view class="pick-time-icon iconfont icon-shangxiajiantou"></view>
				<view class="pick-time-box autoxy">
					{{now}}
				</view>
			</view>
		</picker>
		<view class="performance fillx wbt-u" v-for="item in performance" :key="item.name">
			<view class="performance-title fillx title-u bsp10 .t-bb-u">
				{{item.name==='个人'?'我的':'经销商'}}业绩<text class="performance-title-tips">({{item.tips}})</text>
			</view>
			<view class="performance-content ha fccc">
				<view class="performance-content-title">
					{{item.name==='个人'?'我的':'经销商'}}业绩
				</view>
				<view class="performance-content-first">
					已入账：
					<text class="num-ml10">0元</text>
				</view>
				<view class="performance-content-second">
					未入账：
					<text class="num-ml10">0元</text>
				</view>
			</view>
		</view>
		<view class="other-division wbt-u fillx">
			<view class="other-division-item fillx bsp10 t-bb-u" v-for="item in divisionList" :key="item.name" @click="openPage(item.page)">
				| {{item.name}}
				<image class="ar-icon" src="../../../static/arrow.svg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				choooseDate:'',
				performance:[
					{name:'个人',tips:'仅含个人经销市场业绩'},
					{name:'市场',tips:'仅含经销商市场业绩'}
				],
				divisionList:[
					{name:'市场补贴列表',page:'/pages/myPlace/awrad/subsidyList/subsidyList'},
					{name:'市场经销列表',page:'/pages/myPlace/awrad/market/market'},
					{name:'创客管理列表',page:'/pages/myPlace/awrad/creator/creator'}
				]
			}
		},
		methods: {
			changeDate(e){
				this.choooseDate=e.detail.value
			},
			openPage(page){
				uni.navigateTo({
					url:page,
					fail(err) {
						console.log(err)
					}
				})
			},
			confirm(obj){
				let year=obj.year
				let month=obj.month
				let chooseDate=year+'-'+month
				this.chooseDate=chooseDate
				uni.showToast({
					title:'选择了'+this.chooseDate,
					icon:'none'
				})
			},
		},
		computed:{
			start(){
				let now=new Date()
				let y=now.getFullYear()-3
				return y-3+'-'+'01'
			},
			now(){
				let now=new Date()
				let y=now.getFullYear()
				let m=now.getMonth()+1
				m=m>9?m:'0'+m
				return y+'-'+m
			}
		},
	}
</script>

<style scoped>
	/*border-top-unify 统一外box的border-top样式*/
	/* .wbt-u{
		border-top: 3px solid #facd91;
	} */
	/*title-border-bottom-unify 统一title的border-bottom样式*/
	/* .t-bb-u{
		border-bottom: 1px solid #d7d7d7;
	} */
	/*统一title样式*/
	/* .title-u{
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	} */
	/**/
	.num-ml10{
		margin-left: 20px;
	}
	/*arrow-icon 统一箭头图标样式*/
	.ar-icon{
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
	/*--------------以上为本页面统一样式--------------*/
	
	.pick-time{
			font-size: 15px;
			font-weight: normal;
			color: #000000;
			padding: 10px;
			background-color: #fff;
			position: relative;
		}
		.pick-time-box{
			display: inline-block;
			padding: 5px 10px;
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			background-color: #f2f2f2;
			border-radius: 1vw;
		}
		.pick-time-icon{
			display: inline-block;
			margin-left: 5px;
		}
	
	.performance-title{
		padding: 10px;
	}
	.performance-content{
		font-weight: bold;
		color: #000000;
		margin-left: 50%;
	}
	.performance-content-title{
		font-size: 15px;
		padding: 10px 0;
		/* margin-bottom: 15px; */
	}
	.performance-content-first,
	.performance-content-second{
		font-size: 13px;
		padding: 10px 0;
	}
	.other-division-item{
		position: relative;
		padding: 10px;
	}
	.performance-title-tips{
		margin-left: 10rpx;
		font-size: 11px;
		color: rgba(0,0,0,.4);
	}
</style>
